<template>
    <div class="app-container">
        <h2 style="text-align: center;">发布新课程</h2>
        <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
            <el-step title="填写课程基本信息" />
            <el-step title="创建课程大纲" />
            <el-step title="提交审核" />
        </el-steps>

        <el-button type="success" circle @click="openDialog(1)">添加章节</el-button>
        <!-- 章节 -->
        <ul class="chanpterList">
            <li v-for="chapter in chapterNestedList" :key="chapter.id">
                <p>
                    {{ chapter.title }}
                    <span class="acts">
                        <el-button type="success" circle @click="openVideoDialog(chapter.id,true)">添加课时</el-button>
                        <el-button style="" type="primary" @click="openDialog(chapter.id)">编辑</el-button>
                        <!-- <el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>  -->
                        <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
                            icon-color="red" title="这是一段内容确定删除吗？" @confirm='removeChapterById(chapter.id)'>
                            <el-button type="danger" slot="reference">删除</el-button>
                        </el-popconfirm>
                    </span>
                </p>
                <!-- 视频 -->
                <ul class="chanpterList videoList">
                    <li v-for="video in chapter.children" :key="video.id">
                        <p>{{ video.title }}
                            <span class="acts">
                                <el-button type="primary" @click="openVideoDialog(video.id,false)">编辑</el-button>
                                <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' icon="el-icon-info"
                                    icon-color="red" title="这是一段内容确定删除吗？" @confirm='removeVideoById(video.id)'>
                                    <el-button type="danger" slot="reference">删除</el-button>
                                </el-popconfirm>
                            </span>
                        </p>
                    </li>
                </ul>
            </li>
        </ul>
        <div>
            <el-button @click="previous">上一步</el-button>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
        </div>

        <!-- 添加和修改章节表单 -->
        <el-dialog :visible.sync="dialogChapterFormVisible" :title='chapterMap[templeChapter]'>
            <el-form :model="chapter" label-width="120px">
                <el-form-item label="章节标题">
                    <el-input v-model="chapter.title" />
                </el-form-item>
                <el-form-item label="章节排序">
                    <el-input-number v-model="chapter.sort" :min="0" controls-position="right" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 添加和修改课时表单 -->
        <el-dialog :visible.sync="dialogVideoFormVisible" :title="videoMap[templeVideo]">
            <el-form :model="video" label-width="120px">
                <el-form-item label="课时标题">
                    <el-input v-model="video.title" />
                </el-form-item>
                <el-form-item label="课时排序">
                    <el-input-number v-model="video.sort" :min="0" controls-position="right" />
                </el-form-item>
                <el-form-item label="是否免费">
                    <el-radio-group v-model="video.isFree">
                        <el-radio :label="true">免费</el-radio>
                        <el-radio :label="false">默认</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="上传视频">
                    <el-upload :on-success="handleVodUploadSuccess" :on-remove="handleVodRemove"
                        :before-remove="beforeVodRemove" :on-exceed="handleUploadExceed" :file-list="fileList"
                        :action="BASE_API+'/vidservice/vod/upload'" :limit="1" class="upload-demo">
                        <el-button size="small" type="primary">上传视频</el-button>
                        <el-tooltip placement="right-end">
                            <div slot="content">最大支持1G，<br>
                                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                                SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
                            <i class="el-icon-question" />
                        </el-tooltip>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
                <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    const defaultForm = {
        title: '',
        sort: '',
        courseId: ''//课程id,通过路由获取
    }
    const defaultVideoForm = {
        title: '',
        sort: '',
        chapterId: '',
        courseId: '',
        playCount: 0,
        isFree: false,
        videoSourceId:'',
        videoOriginalName:''
        
    }

    import { getChapterVideoList, addChapter, findChapterById, updateChapter, deleteChapterById } from '@/api/chapter';
    import { addVideo, findVideoById, updateVideo, deleteVideoById,deleteAliyunVideo } from '@/api/video';
    export default {
        data() {
            return {
                saveBtnDisabled: false,
                chapterNestedList: [],
                dialogVideoFormVisible: false,
                dialogChapterFormVisible: false,
                chapter: defaultForm,
                video: defaultVideoForm,
                visible: false,
                BASE_API: process.env.BASE_API,
                saveVideoBtnDisabled: false,
                fileList: [],
                chapterMap:{
                    addChapterData:"添加章节",
                    updateChapterData:"修改章节"
                },
                templeChapter:'',
                videoMap:{
                    addVideoData:"添加课时",
                    updateVideoData:"修改课时"
                },
                templeVideo:'',
            }
        },
        created() {
            this.init()
        },
        methods: {
            init() {
                if (this.$route.params && this.$route.params.id) {
                    this.chapter.courseId = this.$route.params.id
                    this.video.courseId = this.$route.params.id
                }
                getChapterVideoList(this.chapter.courseId).then(res => {
                    this.chapterNestedList = res.data.items
                })
            },
            previous() {
                this.$router.push({ path: '/course/info/' + this.chapter.courseId })
            },
            next() {
                this.$router.push({ path: '/course/publish/' + this.chapter.courseId })
            },
            //打开弹窗
            openVideoDialog(id,flag) {
                if(flag){
                    this.templeVideo="addVideoData"
                    this.video = { ...defaultVideoForm }
                    this.fileList = []
                }else{
                    this.templeVideo="updateVideoData"
                    this.updateVideoById(id)
                }
                this.dialogVideoFormVisible = true

                this.video.chapterId = id
            },
            addVideo() {
                addVideo(this.video).then(res => {
                    if (res.success) {
                        this.$message({
                            type: "success",
                            message: "添加课时成功"
                        })
                        this.init()
                        this.dialogVideoFormVisible = false
                    } else {
                        this.$message({
                            type: "error",
                            message: "添加课时失败"
                        })
                    }
                })
            },
            //打开弹窗
            openDialog(id) {
                if(id==1){
                    this.templeChapter = "addChapterData"
                }else{
                    this.templeChapter="updateChapterData"
                    this.findChapterById(id)
                }
                this.dialogChapterFormVisible = true
                this.chapter = { ...defaultForm }
            },
            saveOrUpdate() {
                if (!this.chapter.id) {
                    this.addChapter();
                } else {
                    this.updateChapter();
                }
            },
            saveOrUpdateVideo() {
                if (!this.video.id) {
                    this.addVideo();
                } else {
                    this.updateVideo();
                }
            },
            addChapter() {
                addChapter(this.chapter).then(res => {
                    if (res.success) {
                        this.$message({
                            type: "success",
                            message: "添加成功"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: "添加失败"
                        })
                    }
                    this.dialogChapterFormVisible = false
                    this.init()
                })
            },
            //保存编辑后的内容
            updateChapter() {
                updateChapter(this.chapter).then(res => {
                    if (res.success) {
                        this.$message({
                            type: "success",
                            message: "修改成功"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: "修改失败"
                        })
                    }
                    this.dialogChapterFormVisible = false
                    this.init()
                })

            },
            //保存编辑后的内容
            updateVideo() {
                updateVideo(this.video).then(res => {
                    if (res.success) {
                        this.$message({
                            type: "success",
                            message: "修改成功"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: "修改失败"
                        })
                    }
                })
                this.dialogVideoFormVisible = false
                this.init()
            },
            //回显数据
            findChapterById(id) {
                findChapterById(id).then(res => {
                    this.chapter = res.data.items
                })
            },
            //回显数据
            updateVideoById(id) {
                findVideoById(id).then(res => {
                    this.video = res.data.items
                    this.fileList=[{'name':this.video.videoOriginalName}]
                })
            },
            //删除章节
            removeChapterById(id) {
                deleteChapterById(id).then(res => {
                    if (res.success) {
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            showClose: true
                        })
                        this.fileList=[]
                        this.video={...this.defaultVideoForm}
                        this.init()
                    }
                })

            },
            //删除课时
            removeVideoById(id) {
                deleteVideoById(id).then(res => {
                    if (res.success) {
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            showClose: true
                        })
                        this.init()
                    }
                })
            },
            //上传成功的回调
            handleVodUploadSuccess(response,file,fileList){
                this.video.videoSourceId=response.data.videoId
                this.video.videoOriginalName=file.name
            },
            //上传之前的限制,上传多于一个视频
            handleUploadExceed(files,fileList){
                this.$message.warning('想要重新上传视频，请先删除已上传的视频')
            },
            //删除阿里云视频
            handleVodRemove(files,fileList){
                deleteAliyunVideo(this.video.videoSourceId).then(res=>{
                    this.$message({
                        type:'success',
                        message:'删除视频成功'
                    })
                })
            },
            //删除之前调用
            beforeVodRemove(file,fileList){
                return this.$confirm(`你确定删除${file.name}吗?`)
            }
        }
    }
</script>

<style scoped>
    .chanpterList {
        position: relative;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .chanpterList li {
        position: relative;
    }

    .chanpterList p {
        float: left;
        font-size: 20px;
        margin: 10px 0;
        padding: 10px;
        height: 70px;
        line-height: 50px;
        width: 100%;
        border: 1px solid #DDD;
    }

    .chanpterList .acts {
        float: right;
        font-size: 14px;
    }

    .videoList {
        padding-left: 50px;
    }

    .videoList p {
        float: left;
        font-size: 14px;
        margin: 10px 0;
        padding: 10px;
        height: 50px;
        line-height: 30px;
        width: 100%;
        border: 1px dotted #DDD;
    }
</style>